<!--
*@Author: QWP
*@Description: 快速建群
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    style="top: 10px"
    okText="建立群聊"
    @close="dialogClose">
    <a-layout class="f-h-100"
      style="height: 83vh">
      <u-collapsed-sider width="250">
        <a-checkbox-group v-model:value="state.checkedList" :options="['值班', '值守', '备勤']" />
        <u-tree 
          v-model:expandedKeys="state.expandedKeys"
          v-model:checkedKeys="state.checkedKeys"
          checkable
          :tree-data="state.uDUsers"
          @check="treeCheck">
        </u-tree>
      </u-collapsed-sider>
      <a-layout-content class="s-bg-white f-padding-20"
        style="overflow: auto">
        <u-busi-card title="群名称"
          class="f-margin-b20">
          <a-input v-model:value="form.groupName"></a-input>
        </u-busi-card>
        <a-row style="font-family: PingFang SC Regular, PingFang SC Regular;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 22px;">
          {{ selectedMsg }}
        </a-row>
        <a-list :grid="{ column: 7 }" :data-source="state.checkedNodes.filter(i => i.key.split('-').length == 3)"
          class="f-margin-t20">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-tag class="u-user-tag" closable @close="closeUser(item.key)">{{ item.title }}</a-tag>
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { HomeOutlined, FileTextOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts'
import { fileCols } from '@/common/model/fileCols'
import { units, depts, users } from '@/common/model/base'
import { cloneDeep } from 'lodash'
const route = useRoute()

const formRef = ref<FormInstance>()
const form = reactive({
  groupName: ''
})

const state = reactive({
  uDUsers: [],
  expandedKeys: ['1'],
  checkedNodes: [],
  checkedKeys: [],

  checkedList: []
})
const selectedMsg = computed(() => {
  return `已选: ${state.checkedNodes.filter(i => i.type == '2').length}人, ${state.checkedNodes.filter(i => i.type == '1').length}个部门,${state.checkedNodes.filter(i => i.type == '0').length}个单位`
})

onMounted(() => {
  let tUnits = units;
  tUnits.forEach(i => {
    i.title = i.label;
    i.key = i.value;
    i.type = '0',
    i.children = depts.map(id => {
      return {
        title: id.label,
        key: `${i.key}-${id.value}`,
        type: '1',
        children: users.map(iu => {
          return {
            title: iu.label,
            key: `${i.key}-${id.value}-${iu.value}`,
            type: '2',
          }
        })
      }
    })
  })
  state.uDUsers = tUnits;
})

// 树的点击事件
const treeCheck = (checkedKeys, e) => {
  state.checkedNodes = e.checkedNodes
}

// 左侧人员的关闭
const closeUser = ( key: string ) => {
  let tCheckeKeys = cloneDeep(state.checkedKeys).filter(i => {
    return i != key && key.startsWith(i) == false;
  })
  state.checkedKeys = tCheckeKeys
  state.checkedNodes = cloneDeep(state.checkedNodes).filter(i => i.key != key)
}


// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
.u-user-tag {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  justify-content: space-between;
  align-items: center;
  background: #F2F2F2;
  border-radius: 8px 8px 8px 8px;
  border: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
</style>